<template>
	<view>
		<view class="body" style=" max-width:640px; overflow:auto; overflow-x:hidden;height: 100vh;">
			<dfHeader></dfHeader>
			<div class='content1 grey'>

				<section class="index_st7 clearfix mt10">
					<div class="index_st7_ct1">品牌</div>

					<div class="index_st7_ct4">
						<div class="line"></div>
					</div>
				</section>

				<section class="index_st13 clearfix">
					<div class="index_st13_all">
						<div class="index_st13_li  mt10" v-for="(data,i) in dataList" @tap="goDetail(data)">
							<div class="index_st13_ct3"><img :src="data.pic"></div>
							<div class="index_st13_ct1 text_overflow">{{data.title}}</div>
						</div>
					</div>
					<div class="yema">
						<div class="qian" @tap='prev()' v-if="show_prev">上一页</div>
						<div class="qian act" v-else="show_prev">上一页</div>
						<block v-for="x in pages">
							<div class="qian pageN" style="color:red" v-if="x==pageIndex+1" @tap="jump(x)">{{x}}</div>
							<div class="qian pageN" v-else @tap="jump(x)">{{x}}</div>
						</block>
						<div class="next" @tap='next()' v-if="show_next">下一页</div>
						<div class="next act" v-else="show_next">下一页</div>
					</div>
				</section>

				<dfFooter></dfFooter>
			</div>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				dataList: [],
				pageIndex: 0,
				show_prev: false,
				show_next: true,
				loading: true,
				// 当前菜单index
				tabIndex: 0,
				// 当前菜单id
				tabId: "pinpai",
				order: "time",
				pages: [1, 2, 3],
				next_pageN: 0,
				turn_page: true
			}
		},
		onLoad() {
			this.getList();
			this.$functions.setPageData(this.tabId);
		},
		methods: {
			jump(n) {
				this.pageIndex = n - 1;
				this.reload = true;
				this.turn_page = false;
				// console.log(n, this.pageIndex);
				this.getList()
			},
			prev() {
				var newP = [];
				var startP = this.pages[0] - 3;
				for (var i = 0; i < 3; i++) {
					newP.push(startP + i);
				}
				this.pages = newP;
				this.pageIndex = this.pages[0] - 1;
				if (this.pageIndex <= 1) {
					this.show_prev = false;
				}
				this.reload = true;
				this.show_next = true;
				this.turn_page = true;
				this.getList();
			},
			next() {
				var newP = [];
				var startP = this.pages.pop() + 1;
				for (var i = 0; i < this.next_pageN; i++) {
					newP.push(startP + i);
				}
				this.pages = newP;
				this.pageIndex = this.pages[0] - 1;
				this.reload = true;
				this.show_prev = true;
				this.turn_page = true;
				this.getList();
			},
			// 获取数据列表
			getList() {
				// 获取某个菜单下的数据				
				let _this = this;
				var para = {
					pageSize: 6,
					pageIndex: this.pageIndex,
					typeId: this.tabId,
					order: this.order
				};
				this.$request.api_request('', para).then(function(data) {
					let list = _this.setData(data.result.data);
					if (_this.turn_page) {
						_this.next_pageN = data.result.next_page;
						if (_this.next_pageN == 0) {
							_this.show_next = false;
						}
					}
					//首次加载直接赋值，之后追加
					_this.dataList = _this.reload ? list : _this.dataList.concat(list);
					_this.reload = false;
					// 取消刷新图标
					uni.stopPullDownRefresh();
					_this.loading = false
					// console.log(list.length,para.pageSize)
					if (list.length < para.pageSize) {
						_this.show_next = false;
					}
				})
			},
			setData: function(items) {
				return this.$functions.setData(items, true);
			},
			goDetail: function(e) {
				this.$functions.goDetail(e, this)
			}
		},
		watch: {}
	}
</script>
